 <!-- 排名和画像 -->
<template>
    <div class="course2">
        <!-- 排名（左） -->
        <div class="course-ranking">
            <Ranking :arr="arr" />
        </div>
        <!-- 画像（右） -->
        <div class="course-portrait">
            <Portrait :wordCloud="wordCloud" />
        </div>
    </div>
</template>

<script>
import Ranking from './ranking.vue'
import Portrait from './portrait.vue'
export default {
    components: {
        Ranking,
        Portrait
    },
    // 父组件发放的 排名（左） 和 词云（右）的数据
    props:['arr','wordCloud']
}
</script>

<style lang="less" scoped>
.course2 {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 15px;

    .course-ranking {
        flex: 2;
        height: 310px;
        margin-right: 15px;
    }

    .course-portrait {
        flex: 1;
        height: 310px;
    }
}
</style>